<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		  <style type="text/css">  
        #frame {/*----------图片轮播相框容器----------*/  
            position: absolute; /*--绝对定位，方便子元素的定位*/  
            top: 110px;
            left: 704px;
            width: 218px;  
            height: 100%;  
            overflow: hidden;/*--相框作用，只显示一个图片---*/  
/*            border-radius:5px; */ 
        }  
         
        #photos img {  
            float: left;  
            width:218px;  
            height:100%;  
        }  
        #photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/  
            position: absolute;z-index:9px;  
            width: calc(300px * 5);/*---修改图片数量的话需要修改下面的动画参数*/  
        }  
        .play{  
            animation: ma 20s ease-out infinite alternate;/**/  
        }  
        @keyframes ma {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/  
            0%,20% {        margin-left: 0px;       }  
            25%,40% {       margin-left: -218px;    }  
            45%,60% {       margin-left: -436px;    }  
            65%,80% {       margin-left: -654px;    }  
            85%,100% {      margin-left: -872px;   }  
        }  
        .num{  
            position:absolute;z-index:10;  
            display:inline-block;  
            right:35px;
            bottom:130px;  
            border-radius:100%;  
            background:white;  
            width:20px;height:20px;  
            line-height:25px;  
            cursor:pointer;   
            text-align:center;  
            opacity:0.8;  
        }  
        .num:hover{background:#0099FF;}  
        .num:hover,#photos:hover{animation-play-state:paused;}  
        .num:nth-child(2){margin-right:30px}  
        .num:nth-child(3){margin-right:60px}  
        .num:nth-child(4){margin-right:90px}  
        .num:nth-child(5){margin-right:120px}  
        #a1:hover ~ #photos{animation: ma1 .5s ease-out forwards;}  
        #a2:hover ~ #photos{animation: ma2 .5s ease-out forwards;}  
        #a3:hover ~ #photos{animation: ma3 .5s ease-out forwards;}  
        #a4:hover ~ #photos{animation: ma4 .5s ease-out forwards;}  
        #a5:hover ~ #photos {animation: ma5 .5s ease-out forwards;}  
        @keyframes ma1 {0%{margin-left:-872px;}100%{margin-left:-0px;} }  
        @keyframes ma2 {0%{margin-left:-872px;}100%{margin-left:-218px;}   }  
        @keyframes ma3 {100%{margin-left:-436px;}   }  
        @keyframes ma4 {100%{margin-left:-654px;}   }  
        @keyframes ma5 {100%{margin-left:-872px;}  }  
  </style>  
	</head>
	<body>
		<div id="bg"></div>
		<div class="warp">
		<header class="clearfix">
			<div class="header_bg"></div>
			<div class="officia_icon">
				<a href="#"><img src="img/homepage_icon.png"/></a>
			</div>
			<div class="pang_menu">
				<ul>
					<li><a href="index.html">首页<span>page</span></a></li>
					<li><a href="Gamelist.html">游戏<span>game</span></a></li>
					<li><a href="Gamepage.html">案例<span>Case</span></a></li>
					<li><a href="index.html">关于我们<span>Abuot Us</span></a></li>
					<li><a href="#"><i class="iconfont icon-weixin"></i></a></li>
				</ul>
			</div>
			
		</header>
		<nav>
			<div class="homepage_list clearfix">
			<ul class="clearfix">
				<li><a href="#"><img src="img/index/game1.png"/></a></li>
				<li><a href="#"><img src="img/index/game2.png"/></a></li>
				<li><a href="#"><img src="img/index/game3.png"/></a></li>
				<li><a href="#"><img src="img/index/game4.png"/></a></li>
			</ul>
			<div class="homepage_gameipone">
				<a href="#"><img src="img/index/gameipone_1.png"/></a>
			</div>
			<ul class="clearfix">
				<li><a href="#"><img src="img/index/game5.png"/></a></li>
				<li><a href="#"><img src="img/index/game6.png"/></a></li>
				<li><a href="#"><img src="img/index/game7.png"/></a></li>
				<li><a href="#"><img src="img/index/game8.png"/></a></li>
			</ul>
			</div>
			<div id="frame" >  
        <a id="a1" class="num"></a>  
        <a id="a2" class="num"></a>  
        <a id="a3" class="num"></a>  
        <a id="a4" class="num"></a>  
        <a id="a5" class="num"></a>  
        <div id="photos" class="play">  
              <img src="img/index/lunbo1.png" >  
              <img src="img/index/lunbo2.png" >  
              <img src="img/index/lunbo3.png" >  
              <img src="img/index/lunbo4.png" >  
              <img src="img/index/lunbo5.png" >  
              
        </div>  
</div> 
	<div class="hand">
		<img src="img/index/hand.png"/>
		<a href="#"><span>试玩游戏</span></a>
	</div>
	<div class="text">
		<dl>
			<dd>我们能给</dd>
			<dd>客户带来的利益</dd>
			<dd>每一个细节的处理</dd>
			<dd>都体现出我们对时尚的不懈追求</dd>
			<div class="text_link">
				<a href="#"><span>了解更多</span></a>
			</div>
		</dl>
	</div>
		</nav>
		<section>
			<div class="section_bg"></div>
			<div class="pic">
				<img src="img/index/pic_1.png"/>
				<img src="img/index/pic_2.png"/>
				<img src="img/index/pic_3.png"/>
				<img src="img/index/pic_6.png"/>
				<img src="img/index/pic_4.png"/>
				<img src="img/index/pic_5.png"/>
				<img src="img/index/pic_7.png"/>
			</div>
			<ul class="clearfix">
				<li><a href="#"><img src="img/index/green_ip.png"/></a></li>
				<li><a href="#"><img src="img/index/pink_ip.png"/></a></li>
				<li><a href="#"><img src="img/index/bule_ip.png"/></a></li>
			</ul>
			<ul class="clearfix">
				<li>STEP<span>选择一个游戏，换图</span></li>
				<li>THE SECOND STEP<span>选择一个游戏，换图</span></li>
				<li>THE THIRD STEP<span>选择一个游戏，换图</span></li>
			</ul>
			<div class="game_text">
				<dl>
					<dd>狂转游戏</dd>
					<dd>潮流趣味游戏，引发全民G点，疯狂转发。<br/>
						还不马上购买，植入你要传播的产品？</dd>
					<dd>Turn mad game</dd>
				</dl>
			</div>
			<ul class="clearfix">
				<li>
					<div class="game_show clearfix">
						<dl>
							<dd>剑圣传奇</dd>
							<dd>2014-07-29</dd>
							<dd>使用次数：20</dd>
							<dd>——</dd>
						</dl>
						<div class="game_pay">
							<div class="pay">
								<a href="#"><span>购买</span></a>
							</div>
							<i class="iconfont icon-shijian"></i>
						</div>
						<div class="game_pic">
						<a href="#"><img src="img/index/lunbo1.png"/></a>
					</div>
					</div>
					
				</li>
				<li>
					<div class="game_show clearfix">
						<dl>
							<dd>PLAGUE LNC</dd>
							<dd>2014-07-29</dd>
							<dd>使用次数：20</dd>
							<dd>——</dd>
						</dl>
						<div class="game_pay">
							<div class="pay">
								<a href="#"><span>购买</span></a>
							</div>
							<i class="iconfont icon-shijian"></i>
						</div>
						<div class="game_pic">
						<a href="#"><img src="img/index/lunbo2.png"/></a>
					</div>
					</div>
					
				</li>
				<li>
					<div class="game_show clearfix">
						<dl>
							<dd>地狱边境</dd>
							<dd>2014-07-29</dd>
							<dd>使用次数：20</dd>
							<dd>——</dd>
						</dl>
						<div class="game_pay">
							<div class="pay">
								<a href="#"><span>购买</span></a>
							</div>
							<i class="iconfont icon-shijian"></i>
						</div>
						<div class="game_pic">
						<a href="#"><img src="img/index/lunbo3.png"/></a>
					</div>
					</div>
					
				</li>
			</ul>
			<div class="game_text">
				<dl>
					<dd>抽奖游戏</dd>
					<dd>形式各样抽奖游戏，引发全民尖叫，惊喜不断。<br/>
						还不马上购买，植入你要传播的产品？</dd>
					<dd>Lottery game</dd>
				</dl>
			</div>
				<ul class="clearfix">
				<li>
					<div class="game_show clearfix">
						<dl>
							<dd>功夫西游</dd>
							<dd>2014-07-29</dd>
							<dd>使用次数：20</dd>
							<dd>——</dd>
						</dl>
						<div class="game_pay">
							<div class="pay">
								<a href="#"><span>购买</span></a>
							</div>
							<i class="iconfont icon-shijian"></i>
						</div>
						<div class="game_pic">
						<a href="#"><img src="img/index/lunbo4.png"/></a>
					</div>
					</div>
					
				</li>
				<li>
					<div class="game_show clearfix">
						<dl>
							<dd>宝石迷阵</dd>
							<dd>2014-07-29</dd>
							<dd>使用次数：20</dd>
							<dd>——</dd>
						</dl>
						<div class="game_pay">
							<div class="pay">
								<a href="#"><span>购买</span></a>
							</div>
							<i class="iconfont icon-shijian"></i>
						</div>
						<div class="game_pic">
						<a href="#"><img src="img/index/lunbo6.png"/></a>
					</div>
					</div>
					
				</li>
				<li>
					<div class="game_show clearfix">
						<dl>
							<dd>植物大战僵尸</dd>
							<dd>2014-07-29</dd>
							<dd>使用次数：20</dd>
							<dd>——</dd>
						</dl>
						<div class="game_pay">
							<div class="pay">
								<a href="#"><span>购买</span></a>
							</div>
							<i class="iconfont icon-shijian"></i>
						</div>
						<div class="game_pic">
						<a href="#"><img src="img/index/lunbo5.png"/></a>
					</div>
					</div>
					
				</li>
			</ul>
			<div class="game_text">
				<dl>
					<dd>经典案例分享</dd>
					<dd>大家对胖糖的信赖，<br/>
						来源于其产品与需求巧妙结合的经典营销效果。</dd>
					<dd>Lottery game</dd>
				</dl>
			</div>
			<ul class="clearfix">
				<li class="clearfix">
					<div class="game_case">
						<div class="tupiao">
							<div class="tupiao_one">
								<img src="img/index/plane_ic.png"/>
							</div>
							<div class="tupiao_two">
								24<span>october</span>
							</div>
							<div class="tupiao_three">
								<i class="iconfont icon-shijian"></i>
							</div>
						</div>
						<dl>
							<dd>南方航空</dd>
							<dd>飞行挑战赛</dd>
							<dd>2014年5月14日--5月27日</dd>
							<dd>扫码关注微信参加飞行挑战赛并抽奖</dd>
							<dd>即有机会赢取丰厚奖品</dd>
						</dl>
						<div class="game_case_pic">
							<img src="img/index/plane.png"/>
						</div>
					</div>
				</li>
				<li class="clearfix">
					<div class="game_case">
						<div class="tupiao">
							<div class="tupiao_one">
								<img src="img/index/plane_ic.png"/>
							</div>
							<div class="tupiao_two">
								24<span>october</span>
							</div>
							<div class="tupiao_three">
								<i class="iconfont icon-shijian"></i>
							</div>
						</div>
						<dl>
							<dd>南方航空</dd>
							<dd>飞行挑战赛</dd>
							<dd>2014年5月14日--5月27日</dd>
							<dd>扫码关注微信参加飞行挑战赛并抽奖</dd>
							<dd>即有机会赢取丰厚奖品</dd>
						</dl>
						<div class="game_case_pic">
							<img src="img/index/plane.png"/>
						</div>
					</div>
				</li>
				<li class="clearfix">
					<div class="game_case">
						<div class="tupiao">
							<div class="tupiao_one">
								<img src="img/index/plane_ic.png"/>
							</div>
							<div class="tupiao_two">
								24<span>october</span>
							</div>
							<div class="tupiao_three">
								<i class="iconfont icon-shijian"></i>
							</div>
						</div>
						<dl>
							<dd>南方航空</dd>
							<dd>飞行挑战赛</dd>
							<dd>2014年5月14日--5月27日</dd>
							<dd>扫码关注微信参加飞行挑战赛并抽奖</dd>
							<dd>即有机会赢取丰厚奖品</dd>
						</dl>
						<div class="game_case_pic">
							<img src="img/index/plane.png"/>
						</div>
					</div>
				</li>
				<li class="clearfix">
					<div class="game_case">
						<div class="tupiao">
							<div class="tupiao_one">
								<img src="img/index/plane_ic.png"/>
							</div>
							<div class="tupiao_two">
								24<span>october</span>
							</div>
							<div class="tupiao_three">
								<i class="iconfont icon-shijian"></i>
							</div>
						</div>
						<dl>
							<dd>南方航空</dd>
							<dd>飞行挑战赛</dd>
							<dd>2014年5月14日--5月27日</dd>
							<dd>扫码关注微信参加飞行挑战赛并抽奖</dd>
							<dd>即有机会赢取丰厚奖品</dd>
						</dl>
						<div class="game_case_pic">
							<img src="img/index/plane.png"/>
						</div>
					</div>
				</li>
			</ul>
			<footer>
				<div class="foot">
					<img src="img/index/foot_1.png"/>
					<img src="img/index/foot_2.png"/>
					Copyright © 2014 Pangtang. All Rights Reserved. 版权所有
				</div>
			</footer>
		</section>
		
		
		</div>
	</body>
</html>
